<template>
  <el-card>
    <el-button
      type="primary"
      :icon="Plus"
      class="mt"
      :disabled="!categoryIdStore.category3Id"
      @click="$emit('setShowAttrTable', false)"
      >添加属性</el-button
    >
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column type="index" label="序号" width="80" align="center" />
      <el-table-column prop="attrName" label="属性名称" width="180" />
      <el-table-column label="属性值列表">
        <template #default="{ row }">
          <el-tag
            class="ml-2"
            type="success"
            v-for="attr in row.attrValueList"
            :key="attr.id"
            >{{ attr.valueName }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120" align="center" class="opa-col">
        <template #default="{ row }">
          <el-tooltip content="编辑" placement="top" effect="light">
            <el-button
              size="small"
              type="warning"
              :icon="Edit"
              @click="editAttr(row)"
            />
          </el-tooltip>
          <el-tooltip content="删除" placement="top" effect="light">
            <div class="del-attr">
              <el-popconfirm title="确定要删除吗?" @confirm="delAttr(row.id)">
                <template #reference>
                  <el-button size="small" type="danger" :icon="Delete" />
                </template>
              </el-popconfirm>
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script lang="ts">
export default {
  name: 'attrList',
}
</script>

<script lang="ts" setup>
import { Plus, Delete, Edit } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'

import { useCategoryId } from '@/stores/categoryId'
import { useAttrstore } from '@/stores/attrs'
import { getArrtInfoList, delAttrApi } from '@/api/product/attrInfoList'
import type { AttrInfoDataList } from '@/api/product/model/AttrInfoListType'
import type { AddAttrData, AttrValueItem } from '@/views/product/attr/model'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['setShowAttrTable'])

// delAttr 删除属性
const delAttr = async (id: number) => {
  //
  await delAttrApi(id)
  ElMessage.success('删除属性成功')
  reqAttrInfoList()
}

// 获取属性数据仓库
const attrStore = useAttrstore()

// editAttr 编辑属性
const editAttr = (row: AddAttrData) => {
  //
  emit('setShowAttrTable', false)
  attrStore.isEdit = true
  attrStore.attrData = row
}

// 获取小菠萝中得分类数据仓库
const categoryIdStore = useCategoryId()

// 组件挂载发送请求
onMounted(() => {
  if (!categoryIdStore.category3Id) return
  reqAttrInfoList()
})

// 选择分类发送请求
categoryIdStore.$subscribe((mutation, state) => {
  if (state.category3Id) {
    reqAttrInfoList()
  } else {
    tableData.value = []
  }
})
// 封装请求数据属性的函数
const reqAttrInfoList = async () => {
  tableData.value = await getArrtInfoList(
    categoryIdStore.category1Id as number,
    categoryIdStore.category2Id as number,
    categoryIdStore.category3Id as number
  )
}

//表格数据
const tableData = ref<AttrInfoDataList>([])
</script>

<style scoped>
.mt {
  margin: 10px 0;
}
.del-attr {
  display: inline-block;
  margin-left: 10px;
}
.ml-2 {
  margin-right: 5px;
}
</style>
